---
layout: default
title: "Card - Sleek Admin Dashboard Template"


parent: "components"
sub_parent: "components"
activePage: "card"
plugins: []
---
							<div class="breadcrumb-wrapper">
								<h1>Card</h1>
								{% include breadcrumb.htm %}
							</div>

							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Card with Image</h2>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-12">
											<p class="mb-5">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/card/" target="_blank"> More
												Details </a></p>
										</div>
										<div class="col-md-6 col-xl-3">
											<div class="card mb-4">
												<img class="card-img-top" src="assets/img/elements/cc1.jpg">
												<div class="card-body">
													<h5 class="card-title text-primary">Card Title</h5>
													<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="btn btn-outline-primary">Go somewhere</a>
												</div>
											</div>
										</div>
										<div class="col-md-6 col-xl-3">
											<div class="card mb-4">
												<div class="card-body">
													<img class="card-img-top mb-4 rounded" src="assets/img/elements/cc1a.jpg">
													<h5 class="card-title text-primary">Card Title</h5>
													<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="btn btn-outline-primary">Go somewhere</a>
												</div>
											</div>
										</div>
										<div class="col-md-6 col-xl-3">
											<div class="card  mb-4 p-0">
												<h5 class="card-title text-primary pt-4 pb-2 px-3">Card Title</h5>
												<img class="card-img rounded-0" src="assets/img/elements/cc1b.jpg">
												<div class="card-body">
													<p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="btn btn-link px-0">Card Link</a>
												</div>
											</div>
										</div>
										<div class="col-md-6 col-xl-3">
											<div class="card mb-4">
												<div class="card-body">
													<h5 class="card-title text-primary mb-1">Card Title</h5>
													<p class="pb-3">Sub-heading text</p>
													<img class="mb-4 card-img" src="assets/img/elements/cc1c.jpg">
													<p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="btn btn-link px-0">Card Link</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- Second Row -->
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Text Alignment </h2>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-12">
											<p class="mb-5">You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/card/#text-alignment" target="_blank"> more details.</a></p>
										</div>
										<div class="col-md-6 col-xl-4">
											<div class="card py-3 mb-4">
												<div class="card-body">
													<h5 class="card-title text-primary">Card Title</h5>
													<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="btn btn-outline-primary">Go somewhere</a>
												</div>
											</div>
										</div>
										<div class="col-md-6 col-xl-4">
											<div class="card mb-4 py-3">
												<div class="card-body text-center">
													<h5 class="card-title text-primary">Card Title</h5>
													<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="btn btn-outline-primary">Go somewhere</a>
												</div>
											</div>
										</div>
										<div class="col-md-6 col-xl-4">
											<div class="card mb-4 py-3">
												<div class="card-body text-right">
													<h5 class="card-title text-primary">Card Title</h5>
													<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="btn btn-outline-primary">Go somewhere</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- Third Row -->
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2> Card with image overlay </h2>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-12">
											<p class="mb-5">Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/card/#image-overlays" target="_blank"> more details.</a></p>
										</div>
										<div class="col-md-12 col-lg-6 col-xl-4">
											<div class="card mb-4 bg-gradient-dark">
												<img class="card-img-top" src="assets/img/elements/cc2a.jpg">
												<div class="card-img-overlay absolute-bottom">
													<h5 class="card-title text-primary text-white">Card Title</h5>
													<p class="card-text text-white pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="text-white">Last update 2 mins ago</a>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-lg-6 col-xl-4">
											<div class="card mb-4">
												<img class="card-img-top" src="assets/img/elements/cc2b.jpg">
												<div class="card-img-overlay absolute-middle">
													<h5 class="card-title text-primary">Card Title</h5>
													<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="text-primary">Last update 2 mins ago</a>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-lg-6 col-xl-4">
											<div class="card mb-4">
												<img class="card-img-top" src="assets/img/elements/cc2c.jpg">
												<div class="card-img-overlay">
													<h5 class="card-title text-primary">Card Title</h5>
													<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
													<a href="#" class="text-primary">Last update 2 mins ago</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Card with Deck </h2>
								</div>
								<div class="card-body">
									<p class="mb-5">Need a set of equal width and height cards that aren’t attached to one another? Use card decks. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/card/#card-decks" target="_blank"> More Details	</a></p>
									<div class="card-deck">
										<div class="card">
											<img class="card-img-top" src="assets/img/elements/cc3a.jpg" alt="Card image cap">
											<div class="card-body">
												<h5 class="card-title text-primary">Card Title</h5>
												<p class="card-text pb-3">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little
													bit longer.</p>
												<p class="card-text">
													<small class="text-muted">Last updated 3 mins ago</small>
												</p>
											</div>
										</div>
										<div class="card">
											<img class="card-img-top" src="assets/img/elements/cc3b.jpg" alt="Card image cap">
											<div class="card-body">
												<h5 class="card-title text-primary">Card Title</h5>
												<p class="card-text pb-3">This card has supporting text below as a natural lead-in to additional content.</p>
												<p class="card-text">
													<small class="text-muted">Last updated 3 mins ago</small>
												</p>
											</div>
										</div>
										<div class="card">
											<img class="card-img-top" src="assets/img/elements/cc3c.jpg" alt="Card image cap">
											<div class="card-body">
												<h5 class="card-title text-primary">Card Title</h5>
												<p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
													content than the first to show that equal height action.</p>
												<p class="card-text">
													<small class="text-muted">Last updated 3 mins ago</small>
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Using utilities</h2>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-12">
											<p class="mb-5">Use our handful of available sizing utilities to quickly set a card’s width. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/card/#using-utilities" target="_blank"> more details.</a></p>
										</div>
										<div class="col-md-6">
											<div class="card mb-4">
												<div class="card-body">
													<h5 class="card-title text-primary">Card Title</h5>
													<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
														aliqua. Ut enim ad minim veniam.</p>
													<a href="#" class="btn btn-outline-primary">Go somewhere</a>
												</div>
											</div>
										</div>
										<div class="col-md-6">
											<div class="card mb-4">
												<div class="card-body">
													<h5 class="card-title text-primary">Card Title</h5>
													<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
													<a href="#" class="btn btn-outline-primary">Go somewhere</a>
												</div>
											</div>
										</div>
									</div>

								</div>
							</div>

							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Cards Groups </h2>
								</div>
								<div class="card-body">
									<p class="mb-5">Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use	display: flex; to achieve their uniform sizing. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/card/#card-groups" target="_blank"> more details.</a></p>
									<div class="card-group">
										<div class="card">
											<img class="card-img-top" src="assets/img/elements/cc4a.jpg" alt="Card image cap">
											<div class="card-body">
												<h5 class="card-title text-primary">Card Title</h5>
												<p class="card-text pb-4">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little
													bit longer.</p>
												<p class="card-text">
													<small class="text-muted">Last updated 3 mins ago</small>
												</p>
											</div>
										</div>
										<div class="card">
											<img class="card-img-top" src="assets/img/elements/cc4b.jpg" alt="Card image cap">
											<div class="card-body">
												<h5 class="card-title text-primary">Card Title</h5>
												<p class="card-text pb-4">This card has supporting text below as a natural lead-in to additional content.</p>
												<p class="card-text">
													<small class="text-muted">Last updated 3 mins ago</small>
												</p>
											</div>
										</div>
										<div class="card">
											<img class="card-img-top" src="assets/img/elements/cc4c.jpg" alt="Card image cap">
											<div class="card-body">
												<h5 class="card-title text-primary">Card Title</h5>
												<p class="card-text pb-4">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
													content than the first to show that equal height action.</p>
												<p class="card-text">
													<small class="text-muted">Last updated 3 mins ago</small>
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Background and color </h2>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-12">
											<p class="mb-5">Use text and background utilities to change the appearance of a card. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/card/"
												 target="_blank"> more details.</a></p>
										</div>
										<div class="col-lg-6 col-xl-4">
											<div class="card text-white bg-primary mb-3">
												<div class="card-header bg-primary">Header</div>
												<div class="card-body">
													<h5 class="card-title">Primary card Title</h5>
													<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
												</div>
											</div>
										</div>
										<div class="col-lg-6 col-xl-4">
											<div class="card text-white bg-secondary mb-3">
												<div class="card-header bg-secondary">Header</div>
												<div class="card-body">
													<h5 class="card-title">Secondary card Title</h5>
													<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
												</div>
											</div>
										</div>
										<div class="col-lg-6 col-xl-4">
											<div class="card text-white bg-success mb-3">
												<div class="card-header bg-success">Header</div>
												<div class="card-body">
													<h5 class="card-title">Success card Title</h5>
													<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
												</div>
											</div>
										</div>
										<div class="col-lg-6 col-xl-4">
											<div class="card text-white bg-danger mb-3">
												<div class="card-header bg-danger">Header</div>
												<div class="card-body">
													<h5 class="card-title">Danger card Title</h5>
													<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
												</div>
											</div>
										</div>
										<div class="col-lg-6 col-xl-4">
											<div class="card text-white bg-warning mb-3">
												<div class="card-header bg-warning">Header</div>
												<div class="card-body">
													<h5 class="card-title">Warning card Title</h5>
													<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
												</div>
											</div>
										</div>
										<div class="col-lg-6 col-xl-4">
											<div class="card text-white bg-info mb-3">
												<div class="card-header bg-info">Header</div>
												<div class="card-body">
													<h5 class="card-title">Info card Title</h5>
													<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
												</div>
											</div>
										</div>
										<div class="col-lg-6 col-xl-4">
											<div class="card bg-light mb-3">
												<div class="card-header bg-light">Header</div>
												<div class="card-body">
													<h5 class="card-title text-primary">Light card Title</h5>
													<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
												</div>
											</div>
										</div>
										<div class="col-lg-6 col-xl-4">
											<div class="card text-white bg-dark mb-3">
												<div class="card-header bg-dark">Header</div>
												<div class="card-body">
													<h5 class="card-title">Dark card Title</h5>
													<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
